<template>
    <el-menu default-active="2" class="el-menu-vertical-demo"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <router-link to="/home">
            <el-menu-item index="0">
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
            </el-menu-item>
        </router-link>
        <el-submenu :index="menu.id+''" v-for="(menu,index) in menuList" :key="index">
            <template slot="title">
                <i :class="menu.menuIcon"></i>
                <span>{{ menu.menuName }}</span>
            </template>
            <el-menu-item-group>
                <router-link :to="item.menuRoute" v-for="(item,index) in menu.children" :key="index">
                    <el-menu-item :index="menu.id+'-'+item.id">
                        <i :class="item.menuIcon"></i>
                        <span>{{ item.menuName }}</span>
                    </el-menu-item>
                </router-link>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>
<script>
    import { getMenuTree } from "@/api/menu/menu";
    export default{
        data () {
            return {
            }
        },
        created () {

        },
        computed: {
            menuList: {
                get() {
                    return this.$store.state.menus.menuList
                }
            }
        }
    }
</script>
<style>
    .el-menu {
        height: 100%;
    }

    .router-link-active {
        text-decoration: none;
        color: yellow;
    }

    a {
        text-decoration: none;
        color: white;
    }
</style>